<!--
 * @Author: your name
 * @Date: 2020-10-14 14:54:00
 * @LastEditTime: 2020-10-14 18:03:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \nuxt-iview\components\home\swiper.vue
-->
<template>
  <!-- <Row class="swiperWarpper">
    <Col :span="24"> -->
        <div v-swiper:mySwiper="swiperOptions">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="http://www.eyecedar.com/media/magiccart/magicslider/i/p/ipiro__8uxrj9x_x007_i_1.png" alt="">
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination swiper-pagination-bullets"></div>
        </div>
    <!-- </Col>
  </Row> -->
</template>

<script>
export default {
    data() {
        return {
            imgArr: ['http://www.eyecedar.com/media/magiccart/magicslider/i/p/ipiro__8uxrj9x_x007_i_1.png'],
            currentIndex: 0,
            swiperOptions: {
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    // clickable: true,
                    // dynamicBullets: true
                },
                paginationClickable: true,
                // autoplay: {
                //     stopOnLastSlide: true
                // },
                // speed: 1000,
                loop: true,
                // observer: true,
                // observerParent: true,
                // observeSlideChildren: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            }
        }
    },
    props: {
        swiperOptions2: {
            type: Object,
            default: () => {
                return {
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    paginationClickable: true,
                    autoplay: {
                        stopOnLastSlide: true
                    },
                    speed: 1000,
                    loop: true,
                    observer: true,
                    observeParents: true,
                    autoplayDisableOnInteraction: false,
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev'
                }
            }
        }
    },
    // directives: {
    //     swiper: directive
    // },
}
</script>

<style lang="scss" scoped>
    .swiperWarpper_img {
        width:100%;
        height: 680px;
    }
    
</style>